<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>赌我会瘦</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current vedio-upload-page bg-light-gray">
      <header class="bar bar-nav fb-header">
        <a href="${ctx.host}/profile/bets/${userBet.bet.id}"
          class="icon icon-left pull-left"></a>
        <h1 class="title">${param.phase == 'close' ? '递交成果' : '开启挑战' }</h1>
      </header>
      <div class="content">

        <c:choose>
          <c:when test="${param.phase == 'close'}">
            <div class="content-padded">
              <div class="video-layout">
                <a href="" class="video-header" style="padding-top: 0;">
                  <span style="font-size: .7rem; color: #999;">挑战后体重</span><br>
                  <c:choose>
                    <c:when test="${empty userBet.afterWeight}">
                      <span style="font-size: .9rem; font-weight: 500;">暂未上传</span>
                    </c:when>
                    <c:otherwise>
                      ${userBet.afterWeight}<span
                        style="font-size: .9rem; font-weight: 500;">kg</span>
                    </c:otherwise>
                  </c:choose> 
                </a>
                <div class="video-content">
                  <c:choose>
                    <c:when test="${empty userBet.afterVedio}">
                      <div id="uploadVideo" style="width: 100%; height: 11rem;">
                        <img src="${ctx.resource}/images/bet-video.png" style="width: 100%; display: block;" alt="">
                      </div>
                    </c:when>
                    <c:otherwise>
                      <%-- ${userBet.afterVedio} --%>
                      <div id="uploadVideo" style="width: 100%; height: 11rem;" data-video="${userBet.afterVedio}">
                        <%-- <img src="${ctx.resource}/images/bet-video.png" style="width: 100%; display: block;" alt=""> --%>
                      </div>
                    </c:otherwise>
                  </c:choose>
                </div>
              </div>
              <c:if test="${userBet.status eq 'CLOSEFAILED'}">
                  <p style="text-align: center; font-size: .6rem;">当前视频审核失败，请点击按钮重新拍摄上传</p>
                </c:if>
            </div>
            <div class="button-layout">
              <div class="file-input-wrapper">
                  <button class="button button-big btn-file-input" style="z-index: 0; background-color: #EEEEEE;">${not empty userBet.afterVedio ? '重新拍摄上传' : '拍摄上传'}</button>
                  <input type="file" name="selectVideo" accept="video/*" capture="camcorder" />
              </div>
              <a href="javascript:void(0);" id="uploadVedio" class="button button-big upload-button">确认上传</a>
            </div>
          </c:when>
          <c:otherwise>
            <div class="content-padded">
              <div class="video-layout">
                <a href="" class="video-header" style="padding-top: 0;">
                  <span style="font-size: .7rem; color: #999;">挑战前体重</span><br>
                  <c:choose>
                    <c:when test="${empty userBet.beforeWeight}">
                      <span style="font-size: .9rem; font-weight: 500;">暂未上传</span>
                    </c:when>
                    <c:otherwise>
                      ${userBet.beforeWeight}<span
                        style="font-size: .9rem; font-weight: 500;">kg</span>
                    </c:otherwise>
                  </c:choose> 
                </a>
                <div class="video-content">
                  <c:choose>
                    <c:when test="${empty userBet.beforeVedio}">
                      <div id="uploadVideo" style="width: 100%; height: 11rem;">
                        <img src="${ctx.resource}/images/bet-video.png" style="width: 100%; display: block;" alt="">
                      </div>
                    </c:when>
                    <c:otherwise>
                      <%-- ${userBet.beforeVedio} --%>
                      <div id="uploadVideo" style="width: 100%; height: 11rem;" data-video="${userBet.beforeVedio}">
                        <%-- <img src="${ctx.resource}/images/bet-video.png" style="width: 100%; display: block;" alt=""> --%>
                      </div>
                    </c:otherwise>
                  </c:choose>
                </div>
                <c:if test="${userBet.status eq 'OPENFAILED'}">
                  <p style="text-align: center; font-size: .6rem;">当前视频审核失败，请点击按钮重新拍摄上传</p>
                </c:if>
              </div>
            </div>
            <div class="button-layout">
              <div class="file-input-wrapper">
                  <button class="button button-big btn-file-input" style="z-index: 0; background-color: #EEEEEE;">${not empty userBet.beforeVedio ? '重新拍摄上传' : '拍摄上传'}</button>
                  <input type="file" name="selectVideo" accept="video/*" capture="camcorder" />
              </div>
              <a href="javascript:void(0);" id="uploadVedio" class="button button-big upload-button">确认上传</a>
            </div>
          </c:otherwise>
        </c:choose>
        
        <%-- <div class="content-padded">
          <h1>${param.phase == 'close' ? '递交成果-确认视频.jpg' : '开启挑战-确认视频.jpg' }</h1>
        </div>
        <div class="content-block">
          <c:if test="${param.phase == 'close'}">
            <p><a href="${ctx.host}/activities/1/close" class="button button-big">返回</a></p>
          </c:if>
          <c:if test="${param.phase == 'open'}">
            <p><a href="${ctx.host}/activities/1/open" class="button button-big">返回</a></p>
          </c:if>
        </div> --%>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/profile/bet-vedio-upload.js" />
  <script type="text/javascript">
    require(['page/profile/bet-vedio-upload'], function(page) {
      page.init({
        jsConfig: JSON.parse('${jsConfig}'),
        betId: '${userBet.bet.id}',
        "avatar": '${user.avatar}',
        "phase": '${param.phase}',
        "status": "${param.status}",
        "userName": '${user.nickname}',
      })
    })
  </script>
</body>
</html>